<template>
	<view class="message-wrapper">
		<u-navbar left-text="返回" title="" :autoBack="true" fixed placeholder></u-navbar>

		<view class="content-box">
			<view class="message-box" v-if="list.length">
				<u-collapse accordion @open="readMessage">
					<template v-for="item in list">
						<u-collapse-item 
							:title="item.title" 
							:key="item.id"
							:name="item.id"
						>
							<view slot="title">
								<text 
									class="title"
									:class="{'color-gray': item.isRed}"
								>{{ item.title }}</text>
								<text class="state" v-if="item.isRed == 0">（未读）</text>
							</view>
							<view class="u-collapse-content">{{ item.content }}</view>
						</u-collapse-item>
					</template>
				</u-collapse>
			</view>
			
			<view class="no-data-box" v-if="showNoData">暂无消息</view>
		</view>
	</view>
</template>

<script>
	import { getMessageList, redMessage } from '@/api/index.js'
	
	export default {
		data() {
			return {
				list: [],
				total: 0,
				showNoData: false
			}
		},
		created() {
			this.getListData()
		},
		methods: {
			readMessage(e) {
				const findItem = this.list.find(item => {
					return item.id == e
				})
				
				if(findItem.isRed == 0) {
					redMessage({
						id: findItem.id
					}).then(res => {
						findItem.isRed = 1
					})
				}
			},
			getListData() {
				getMessageList({
					type: '',
					offset: 0,
					limit: 999999
				}).then(res => {
					const { rows, total } = res.data
					this.list = rows || []
					this.total = total
					
					this.showNoData = this.list.length ? false : true
				})
			}
		}
	}
</script>

<style lang="scss">
.message-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	
	.content-box {
		flex: 1;
		height: 0;
		padding: 20rpx;
		
		.message-box {
			height: 100%;
			padding: 0 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: auto;
		}
		
		.no-data-box {
			margin-top: 40rpx;
			color: #999;
			text-align: center;
		}
	}
	
	.color-gray {
		color: #999;
	}
	
	.state {
		color: #999;
		font-size: 24rpx;
	}
}
</style>